<template>
  <div class="ac-wrap" v-loading="loading">
    <div class="screen">
      <img src="../../images/main/screen.png" alt> 筛选查询
    </div>
    <div class="sel">
      <div class="filter-item">
        <span>活动名称：</span>
        <input
          class="ac-name"
          type="text"
          placeholder="活动名称"
          v-model="params.keyWord"
        />
      </div>
      <div class="filter-item">
        <span>活动时间：</span>
        <!-- <input
          class="ac-start-date"
          type="date"
          placeholder="选择开始日期"
          v-model="params.startTime"
        />
        <input
          class="ac-end-date"
          type="date"
          placeholder="选择结束日期"
          v-model="params.endTime"
        /> -->
        <el-date-picker
          v-model="params.startTime"
          type="date"
          placeholder="选择开始日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd">
        </el-date-picker>
        <el-date-picker
          v-model="params.endTime"
          type="date"
          placeholder="选择结束日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd">
        </el-date-picker>

      </div>
      <div class="filter-item">
        <span>活动状态：</span>
        <select
          class="ac-change"
          type="text"
          placeholder=""
          v-model="changeStates"
          >
          <option value="0">请选择</option>
          <option value="1">待合作 </option>
          <option value="2">待审核</option>
          <!-- <option value="3">已驳回 </option> -->
          <option value="4">待报名</option>
          <option value="5">已成团 </option>
          <option value="6">待签到</option>
          <option value="7">已结束 </option>
          <option value="8">已关闭</option>
        </select>
        <div class="sel-btn" @click="getAcList(changeStates)">搜索</div>
      </div>
    </div>
    <div class="clear"></div>
    <div class="ac-tabs">
      <div :class="states == 0 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(0)">
        全部
      </div>
      <div :class="states == 1 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(1)">
        待合作
      </div>
      <div :class="states == 2 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(2)">
        待审核
      </div>
      <div :class="states == 4 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(4)">
        待报名
      </div>
      <div :class="states == 5 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(5)">
        已成团
      </div>
      <div :class="states == 6 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(6)">
        待签到
      </div>
      <div :class="states == 7 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(7)">
        已结束
      </div>
      <div :class="states == 8 ? 'ac-title  ac-title-active' : 'ac-title '" @click="getAcList(8)">
        已关闭
      </div>
    </div>
    <div class="table">
      <div class="thead">
      <div class="ac-poster ">活动海报</div>
      <div class="ac-bt">活动标题</div>
      <div class="ac-ybm">已报名</div>
      <div class="ac-jzdate">活动开始时间</div>
      <div class="ac-state">活动状态</div>
      <div class="ac-ctrl">操作</div>
    </div>
    <div class="tbody" v-for="(item,index) in acList" :key="index">
      <div class="ac-poster ">
        <img
          :src="item.activity_img"
          :style="{
            maxWidth: '100%',
            maxHeight: '160px',
            padding:'10px'
          }"
        />
      </div>
      <div class="ac-bt"><span style="display:inline-block;overflow:hidden;word-wrap: break-word;">{{item.activity_title}}</span></div>
      <div class="ac-ybm" v-if="item.states == 4">{{item.signCount}}人（还差{{item.participate_min - item.signCount}}人成团）</div>
      <div class="ac-ybm" v-else>{{item.signCount}}</div>
      <div class="ac-jzdate" style="padding:0;">
        <div>{{setDate(item.activity_time)}}  {{setTime(item.activity_time)}}</div>
      </div>
      <div class="ac-state" v-if="item.states== 1">待合作</div>
      <div class="ac-state" v-if="item.states== 2">待审核</div>
      <div class="ac-state" v-if="item.states== 3">已驳回</div>
      <div class="ac-state" v-if="item.states== 4">待报名</div>
      <div class="ac-state" v-if="item.states== 5">已成团 </div>
      <div class="ac-state" v-if="item.states== 6">待签到</div>
      <div class="ac-state" v-if="item.states== 7">已结束</div>
      <div class="ac-state" v-if="item.states== 8">已关闭</div>
     <!--  <div class="ac-ctrl" v-if="item.states== 1" ><div @click="queryDetail(item.id)">查看详情</div></div>
      <div class="ac-ctrl" v-else-if="item.states== 2" ><div><span @click="adopt( item.id )">通过审核</span @click="adopt( item.id )">  |  <span>驳回</span></div><div>查看详情</div></div> -->
      <div class="ac-ctrl">
        <div v-if="roleList.search('活动管理') != '-1'" @click="queryDetail(item.id)">查看详情</div>
        <div
          v-if="item.states == 2 && roleList.search('活动审核') != '-1'"
          >
          <span @click="adopt( item.id )">通过审核</span>  |  <span @click="reject( item.id )">驳回</span>
        </div>
        <div
          @click="getErCode(item.id)"
          v-if="(item.states == 5 || item.states == 4 || item.states == 6 || item.states == 7) && roleList.search('活动管理') != '-1'"
          >
          活动二维码
        </div>
        <div
          v-if="(item.states == 4 || item.states == 5 || item.states == 6) && roleList.search('精选推荐') != '-1'"
          @click="recommendation( item.id, item.jing_xuan )"
          >
          {{ item.jing_xuan == 1 ? '取消精选' : '推荐精选' }}
        </div>
        <div
          v-if="(item.states == 4 || item.states == 5 || item.states == 6) && roleList.search('标签设置') != '-1'"
          @click="setTags( item.id )"
          >
          设置标签
        </div>
        <div @click="delAc(item.shan_states,item.id)">{{item.shan_states ? '恢复活动' : '删除活动'}}</div>
      </div>
    </div>
    </div>
    <div class="task" v-if="task">
      <div class="bgc">
        <div class="box_tip">
          <div class="tips">设置标签</div>
          <div class="btn_x">
            <a class="x"
              @click="closeTag()">×</a>
          </div>
          <hr>
          <div class="tagbody" >
            <div  v-for="(item,index) in tagList" :class="(tagId == item.id) ? 'ctag tags' : 'tags'"  :key="index" @click="changeTags(item.id)">{{item.name}}</div>
          </div>
          <div class="btn_submit"
            type="submit"
            @click="saveTags()">提交</div>

        </div>
      </div>
    </div>
    <div style="text-align: center;padding: 50px 0;">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="changePage"
        :page-count="pageTotal">
      </el-pagination>
    </div>
    <div class="tasker" id="img">
      <img src="../../images/main/ercode.png" alt="">
    </div>
  </div>
</template>
<script>
import Global from '../tool/Global.vue'
import axios from 'axios'
import qs from 'qs' // 将请求转换成form 表单提交形式
  export default {
    data() {
      return {
        params: {
          page: 1,
          limit: 10,
          keyWord: "",
          startTime: '',
          endTime: '',
          states:''
        },
        loading: false,
        changeStates:0,
        states: 0,
        acList: [],
        pageTotal: 1,
        tagList: [],
        tagId: '',
        activeId: '',
        task:false,
        roleList:''
      };
    },
    methods: {
      /**
       * 删除活动
       */
     delAc: function(bol,id) {
       let that = this
       this.$confirm( !bol ? '是否删除活动?' : '是否恢复活动?').then ( res => {
          axios({
          method: 'post',
          url:`${that.$store.state.url}/tActivity/deleceActivity `,
            data:qs.stringify({
              id:id,
              states:!bol
            })
      }).then(res => {
        if(res.data.code == 0) {
          that.getAcList()
        }else {
          that.$alert(res.data.msg)
        }
       })
       })
     },
      /**
     *  获取权限
     */
    getRole: function () {

      let that = this;
      axios({
          method: 'post',
          url:`${that.$store.state.url}/sysPermission/selectByEmployeeId`,
            data:qs.stringify({
              empId:that.$cookie.get('pid')
            })
      }).then(res => {
            
            let arr = res.data.data
            let role = []
            for(let i = 0; i < arr.length; i++) {
              role.push(arr[i].name)
            }
            this.roleList = role.toString()
        });
    },
      /**
       * 获取二维码
       */
      getErCode: function(id) {
        console.log(id)
        let that = this 
        this.$alert(`<img src="https://sharespace.cloudjoyclub.com//backstage/api/tActivity/getQrCode?id=${id}">`, '二维码', {
          dangerouslyUseHTMLString: true
        });
        // })
      },
      /**
     * 关闭标签修改
     */
    closeTag: function() {
      this.task = false;
    },
      /**
       * 保存标签
       */
      saveTags: function () {
        axios.post (
          `${this.$store.state.url}/tActivity/addLable`,
          qs.stringify ({
              id: this.activeId,
              lableId:this.tagId

          })
        ).then ( response => {
          let res = response.data;
          if ( res.code == 0 ) {
           this.$alert ( '设置成功' );
           this.task = false;
          }
        })
      },
      /**
       * 设置标签
       */
      changeTags: function (id) {

        this.tagId = id
        console.log(this.tagId)
      },
      /*
      * 获取活动标签列表 tLabel/selectList
      */
      getTagList: function () {
        axios.post (
          `${this.$store.state.url}/tLabel/selectList`,
        ).then ( response => {
          let res = response.data;
          if ( res.code == 0 ) {
           this.tagList = res.data
           this.geTagChange()
          }
        })
      },
      /**
       * 设置选中
       */
      geTagChange: function () {
        axios.post (
                  `${this.$store.state.url}/tActivity/selectLabelByActivityId`,
                  qs.stringify ({
              id: this.activeId
          })
                ).then ( response => {
                  let res = response.data;
                  if ( res.code == 0 ) {
                  this.tagId = res.data.id
                  }
                })
      },
      // 分页
      changePage( argv ) {
        console.log('请求页码')
        console.log(argv)
        this.params.page = argv;
        this.getAcList();
      },
      // 设置标签
      setTags( id ) {
        this.task = true
        this.activeId = id
        this.getTagList()

      },
      // 设置精选
      recommendation( id, jing_xuan ) {
        this.loading = true;
        axios.post (
          `${this.$store.state.url}/tActivity/updateJingXuan`,
          qs.stringify ({
              id: id,
              jing: jing_xuan == 1 ? 0 : 1
          })
        ).then ( response => {
          this.loading = false;
          let res = response.data;
          if ( res.code == 0 ) {
            this.getAcList();
            this.$store.state.fn.success( '设置成功' );
          }
        }, () => {
          this.loading = false;
        });
      },
      // 通过
      adopt( id ) {
        this.loading = true;
        axios.post (
          `${this.$store.state.url}/tActivity/updateStates`,
          qs.stringify ({
            id: id,
            states: 4
          })
        ).then ( response => {
          this.loading = false;
          let res = response.data;
          if ( res.code == 0 ) {
            this.$store.state.fn.success( '审核已通过' );
            this.getAcList();
          }
        }, () => {
          this.loading = false;
        });
      },
      // 驳回
      reject( id ) {
        this.$prompt ( '驳回原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          this.loading = true;;
          axios.post (
            `${this.$store.state.url}/tActivity/rejectActivity`,
            qs.stringify ({
              id: id,
              reject: value
            })
          ).then ( response => {
            this.loading = false;
            let res = response.data;
            if ( res.code == 0 ) {
              this.$store.state.fn.success( '驳回成功' );
              this.getAcList();
            }
          }, () => {
            this.loading = false;
          });
        }).catch(() => {

        });
      },
      /**
       *  查询活动列表
       */
      getAcList: function (num) {
        let that = this;
        that.params.states = num
        that.states = num
        if (num == 0) {
          that.params.states = ''
        }
        that.params.page = that.params.page || 1
        this.loading = true;
        axios({
          method: 'post',
          url:`${that.$store.state.url}/tActivity/selectList`,
              data:qs.stringify(that.params)
        }).then(res => {
          this.loading = false;
          if (res.data.code == 0) {
            this.pageTotal = Math.ceil ( res.data.count / 10 );
            that.acList = res.data.data
          } else {
            alert(res.data.msg);
          }
        }, () => {
          this.loading = false;
        });
      },
      /**
       * 活动详情
      */
      queryDetail: function (id) {
        Global.activityId = id
        this.$router.push({
          path:'/main/activityDetail',
          query: {
            id: id
          }
        })
      },
      /**
     * 根据时间毫秒数 返回年月日
     */
    setDate: function (str) {
      let times = new Date(str)
      return `${times.getFullYear()}-${times.getMonth()+1 < 10 ? '0' + (times.getMonth()+1) : times.getMonth()+1}-${times.getDate() < 10 ? '0' + times.getDate() : times.getDate()}`
    },
    /**
     * 根据时间毫秒数 返回时分秒
     */
    setTime: function (str) {
      let times = new Date(str)
      return `${times.getHours() < 10 ? '0' + times.getHours() : times.getHours()}:${times.getMinutes() < 10 ? '0' + times.getMinutes() : times.getMinutes()}:${times.getSeconds() < 10 ? '0' + times.getSeconds() : times.getSeconds()}`
    },
    },
    mounted () {
      this.getAcList(0)
      this.getRole()
    }
  };
</script>
<style scoped>
.tasker {
    width: 400px;
    height: 400px;
    padding: 10px;
    display: none;
  }
.tagbody {
  height: 240px;
}
.tags {
  background:#ffffff;
border:1px solid #ddd;
border-radius:2px;
min-width:68px;
height:28px;
display: inline-block;
margin: 20px ;
line-height: 28px;
}
.ctag {
  border:1px solid #085dab;
}
.box_tip {
  background: #ffffff;
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  width: 646px;
  height: 399px;
  text-align: center;
  padding-top: 21px;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
  z-index: 2000;
}
.tips {
  font-family: PingFangSC-Medium;
  font-size: 20px;
  color: #000000;
  font-weight: bold;
  height: 35px;
  line-height: 35px;
}
.btn_x {
  background: #9b9b9b;
  width: 86px;
  height: 86px;
  border-radius: 100%;
  position: absolute;
  right: -43px;
  top: -43px;
}
.x {
  font-size: 25px;
  text-decoration: none;
  position: absolute;
  left: 19px;
  bottom: 15px;
  color: #fff;
  font-weight: bold;
}
hr {
  opacity: 0.38;
  background-color: #979797;
  width: 306px;
  height: 2px;
  margin-top: 8px;
}
.text_input {
  margin-top: 103px;
  background: #ffffff;
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  width: 311px;
  height: 40px;
  text-align: center;
  font-size: 18px;
  color: #4a4a4a;
}
.btn_submit {
  display: block;
  margin:20px auto;
  background: #085dab;
  width: 200px;
  height: 45px;
  line-height: 45px;
  padding: 0px;
  margin-bottom: 0px;
  cursor: pointer;
  color: #ffffff;
}
  .ac-wrap {
    /* margin-left: 21px; */
  }
  .screen {
    /* width: 1490px; */
    height: 60px;
    background: #f6f6f6;
    line-height: 60px;
    font-family: PingFangSC-Medium;
    font-size: 18px;
    color: #888888;
  }
  .screen img {
    float: left;
    width: 27px;
    height: 27px;
    margin-left: 10px;
    margin-top: 16px;
    margin-right: 18px;
  }
  .sel {
    margin-top: 30px;
    /* height: 40px; */
    /* line-height: 40px; */
    /* width: 1490px; */
  }
  .sel span {
    width: 90px;
    line-height: 40px;
    height: 40px;
    float: left;
    font-size: 18px;
    font-weight: bold;
  }
  .sel input {
    background: #ffffff;
    border: 1px solid #979797;
    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.50);
    /* width: 220px; */
    height: 38px;
    font-size: 18px;
    color: #888888;
    text-align: center;
    float: left;
    outline: none;
  }
  .sel-btn {
    width: 80px;
    background: #085dab;
    color: #fff;
    text-align: center;
    height: 38px;
    line-height: 38px;
    float: left;
    margin-left: 30px;
    cursor: pointer;
  }
  .sel select {
    background: #ffffff;
    border: 1px solid #979797;
    box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.50);
    width: 220px;
    height: 38px;
    font-size: 18px;
    color: #888888;
    text-align: center;
    float: left;
    outline: none;
    padding-left: 70px;
  }
  .ac-name {
    /* margin-left: 24px;
    margin-right: 55px; */
  }
  .ac-start-date {
    margin-left: 23px;
    margin-right: 30px;
  }
  .ac-end-date {
    margin-left: 0px;
    /* margin-right: 63px; */
  }
  .ac-change {
    /* margin-left: 22px; */
  }
  .ac-tabs {
    /* width: 1303px; */
    height: 55px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-top: 40px;
    border-bottom: 1px solid #ddd;

  }
  .ac-tabs > div {
    cursor: pointer;
  }
  .ac-title {
    /* width: 69px; */
    width: 12.5%;
    line-height:28px;
    height: 55px;
    float: left;
    box-sizing: border-box;
    /* margin-left: 100px; */
  }
  .ac-title-active {
    border-bottom: 3px solid #085dab;
  }
  .ac-title:first-child {
    margin-left: 0;
  }
  .table {
    margin: 0 10px;
    /* margin-left: 13px; */
    /* width: 1293px; */
  }
  .thead {
    background: #e0eefe;
    border: 1px solid #dddddd;
    box-sizing: border-box;
    /* width: 1293px; */
    height: 67px;
    line-height: 67px;
    font-size:20px;
    text-align: center;
    margin-top: 24px;

  }
  .thead > div {
    float: left;
    height: 67px;
    font-weight: bold;
    text-align: center;
    border-right: 1px solid #ddd;
    box-sizing: border-box;
  }
  .tbody {
    border: 1px solid #dddddd;
    box-sizing: border-box;
    /* width: 1293px; */
    border-top: 0px;
    height: 161px;
    overflow: hidden;
  }
  .tbody > div {
    float: left;
    height: 161px;
    /* line-height: 161px; */
    text-align: center;
    font-size:18px;
    color:#4a4a4a;
    border-right: 1px solid #ddd;
    box-sizing: border-box;
    display: flex;
    justify-content:center;
    align-items:Center;

  }

  .tbody > .ac-ybm {
    color:#fe0000;
  }
  .tbody
  .tbody .ac-bt {
    line-height: 25px;
    box-sizing: border-box;
    padding:0  18px 0 18px;
    text-align: left;
    font-weight: bold;
    box-sizing: border-box;
    width: 100%;

  }
  .tbody .ac-jzdate {
    line-height: 25px;
        padding-top: 60px;
        /* height: 101px; */
  }
  .tbody .ac-ctrl {
    color:#085dab;
    border-right: 0px;
    cursor: pointer;
    align-items:center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;

  }
  .ac-ctrl > div {
    text-align: center;
    height: 25px;
    line-height: 25px;
  }
    .day,.time{
        height: 25px;
        line-height: 25px;
    }
  .ac-poster {
    /* width: 189px; */
    width: 16.66666666666667%;
  }
  .ac-bt {
    /* width: 242px; */
    width: 16.66666666666667%;
  }
  .ac-ybm {
    /* width: 189px; */
    width: 16.66666666666667%;
  }
  .ac-jzdate {
    /* width: 224px; */
    width: 16.66666666666667%;
  }
  .ac-state {
    /* width: 219px; */
    width: 16.66666666666667%;
  }
  .ac-ctrl {
    /* width: 224px; */
    width: 16.66666666666667%;
  }
  .clear {
    clear: both;
  }
.filter-item{
  overflow: hidden;
  height: 40px;
  padding:5px 0;
  margin-left: 10px;
  float: left;
}

</style>
